//http://www.chinamoney.com.cn/r/cms/www/chinamoney/data/currency/iblr-md.json
function iblr() {

	$.ajax({
		url: '../r/cms/www/chinamoney/data/currency/iblr-md.json',
		// url: './data/' + 'iblr-chrt.csv',
		type: 'get',
		cache: false
	}).done(function(json) {
		let parse = JSON.parse(json);
		var dirkStr = "";
		var dirvStr = "";
		for (let i = 0;i<3&&i<parse.records.length;i++){
			dirkStr +="<li>"+parse.records[i].productCode+"</li>";
			dirvStr +="<li>"+parse.records[i].latestRate+"</li>";
		}
		$("#dirk").html(dirkStr);
		$("#dirv").html(dirvStr);
	})


}
// 折线图1模块制作
function iblr_chrt() {

	// 1. 实例化对象
	var myChart = echarts.init(document.querySelector(".line .chart"));
	$.ajax({
		url: '../r/cms/www/chinamoney/data/currency/iblr-chrt.csv',
		// url: './data/' + 'iblr-chrt.csv',
		type: 'get',
		cache: false
	}).done(function(csv) {
		var legend = ['DIBO001', 'DIBO007', 'DIBO014'];
		var dataArr = csv.split("\r\n");
		//console.log(dataArr);
		//split分割，前后容易出现空字符串
		if (!dataArr[0]) {
			dataArr.splice(0, 1);
		}
		if (!dataArr[dataArr.length - 1]) {
			dataArr.splice(dataArr.length - 1, 1);
		}
		var chartData = [
				[],
				[],
				[]
			],
			xArr = [];

		$.each(dataArr, function(n, v) {
			if (v) {
				var vArr = v.split(',');
				xArr.push(vArr[0]);
				chartData[0].push(vArr[6])
				chartData[1].push(vArr[7])
				chartData[2].push(vArr[8])
			}
		})
		$("#t1from").html(xArr[xArr.length-1]);
		$("#t1to").html(xArr[0]);
		// 2.指定配置
		var option = {
			// 通过这个color修改两条线的颜色
			color: ["#00f2f1", "#ed3f35", '#773de1'],
			tooltip: {
				trigger: "axis"
			},
			legend: {
				// 如果series 对象有name 值，则 legend可以不用写data
				// 修改图例组件 文字颜色
				textStyle: {
					color: "#4c9bfd"
				},
				// 这个10% 必须加引号
				right: "10%"
			},
			grid: {
				top: "20%",
				left: "3%",
				right: "4%",
				bottom: "3%",
				show: false, // 显示边框
				borderColor: "#012f4a", // 边框颜色
				containLabel: true // 包含刻度文字在内
			},

			xAxis: {
				data: xArr.reverse(),
				axisLabel: {
					show: true,
					// interval: 0,
					// rotate:90,
					color: "#4c9bfd", // 文本颜色
					// formatter:function(value)
					// {
					// 	return value.split("").join("\n");
					// }
				},
				axisTick: {
					show: false // 去除刻度线
				},
				axisLine: {
					show: false // 去除轴线
				}
			},
			yAxis: {
				name: '%',
				type: "value",
				axisTick: {
					show: false // 去除刻度线
				},
				axisLabel: {
					color: "#4c9bfd" // 文本颜色
				},
				axisLine: {
					show: false // 去除轴线
				},
				splitLine: {
					lineStyle: {
						color: "#012f4a" // 分割线颜色
					}
				}
			},
			series: [{
				name: "DIBO001",
				type: "line",
				// true 可以让我们的折线显示带有弧度
				smooth: true,
				data: chartData[0].reverse()
			},
				{
					name: "DIBO007",
					type: "line",
					smooth: true,
					data: chartData[1].reverse()
				}, {
					name: "DIBO014",
					type: "line",
					smooth: true,
					data: chartData[2].reverse()
				}
			]
		};

		// 3. 把配置给实例对象
		myChart.setOption(option);
		// 4. 让图表跟随屏幕自动的去适应
		window.addEventListener("resize", function() {
			myChart.resize();
		});

		// 5.点击切换效果
		$(".line h2").on("click", "a", function() {
			// alert(1);
			// console.log($(this).index());
			// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
			// console.log(yearData[$(this).index()]);
			var obj = yearData[$(this).index()];
			option.series[0].data = obj.data[0];
			option.series[1].data = obj.data[1];
			// 需要重新渲染
			myChart.setOption(option);
		});
	})


};

//http://www.chinamoney.com.cn/r/cms/www/chinamoney/data/currency/prr-md.json
function prr() {

	// 1. 实例化对象
	$.ajax({
		url: '../r/cms/www/chinamoney/data/currency/prr-md.json',
		// url: './data/' + 'iblr-chrt.csv',
		type: 'get',
		encoding:"utf_8",
		cache: false
	}).done(function(json) {
		let parse = JSON.parse(json);
		var drkStr = "";
		var drvStr = "";
		for (let i = 0;i<3&&i<parse.records.length;i++){
			drkStr +="<li>"+parse.records[i].productCode+"</li>";
			drvStr +="<li>"+parse.records[i].latestRate+"</li>";
		}
		$("#drk").html(drkStr);
		$("#drv").html(drvStr);
	})


}
// 折线图2模块制作
function prr_char() {

	// 1. 实例化对象
	var myChart = echarts.init(document.querySelector(".line2 .chart"));
	$.ajax({
		url: '../r/cms/www/chinamoney/data/currency/prr-chrt.csv',
		type: 'get',
		cache: false
	}).done(function(csv) {
		var legend = ['DR001', 'DR007', 'DRO014'];
		var dataArr = csv.split("\r\n");
		//console.log(dataArr);
		//split分割，前后容易出现空字符串
		if (!dataArr[0]) {
			dataArr.splice(0, 1);
		}
		if (!dataArr[dataArr.length - 1]) {
			dataArr.splice(dataArr.length - 1, 1);
		}
		var chartData = [
				[],
				[],
				[]
			],
			xArr = [];

		$.each(dataArr, function(n, v) {
			if (v) {
				var vArr = v.split(',');
				xArr.push(vArr[0]);
				chartData[0].push(vArr[6])
				chartData[1].push(vArr[7])
				chartData[2].push(vArr[8])
			}
		})
		$("#t2from").html(xArr[xArr.length-1]);
		$("#t2to").html(xArr[0]);
		// 2.指定配置
		var option = {
			// 通过这个color修改两条线的颜色
			color: ["#00f2f1", "#ed3f35", '#773de1'],
			tooltip: {
				trigger: "axis"
			},
			legend: {
				// 如果series 对象有name 值，则 legend可以不用写data
				// 修改图例组件 文字颜色
				textStyle: {
					color: "#4c9bfd"
				},
				// 这个10% 必须加引号
				right: "10%"
			},
			grid: {
				top: "20%",
				left: "3%",
				right: "4%",
				bottom: "3%",
				show: false, // 显示边框
				borderColor: "#012f4a", // 边框颜色
				containLabel: true // 包含刻度文字在内
			},

			xAxis: {
				data: xArr.reverse(),
				type:'category',
				axisLabel:{
					show:true,
					interval:1000000000000000000000000
				},
				axisTick: {
					show: true // 去除刻度线
				},
				axisLabel: {
					color: "#4c9bfd" // 文本颜色
				},
				axisLine: {
					show: true // 去除轴线
				}
			},
			yAxis: {
				type: "value",
				axisLabel: {
					show: true,
					interval: 100000
				},
				axisTick: {
					show: false // 去除刻度线
				},
				axisLabel: {
					color: "#4c9bfd" // 文本颜色
				},
				axisLine: {
					show: false // 去除轴线
				},
				splitLine: {
					lineStyle: {
						color: "#012f4a" // 分割线颜色
					}
				}
			},
			series: [{
				name: "DR001",
				type: "line",
				// true 可以让我们的折线显示带有弧度
				smooth: true,
				data: chartData[0].reverse()
			},
				{
					name: "DR007",
					type: "line",
					smooth: true,
					data: chartData[1].reverse()
				}, {
					name: "DR0014",
					type: "line",
					smooth: true,
					data: chartData[2].reverse()
				}
			]
		};

		// 3. 把配置给实例对象
		myChart.setOption(option);
		// 4. 让图表跟随屏幕自动的去适应
		window.addEventListener("resize", function() {
			myChart.resize();
		});

		// 5.点击切换效果
		$(".line h2").on("click", "a", function() {
			// alert(1);
			// console.log($(this).index());
			// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
			// console.log(yearData[$(this).index()]);
			var obj = yearData[$(this).index()];
			option.series[0].data = obj.data[0];
			option.series[1].data = obj.data[1];
			// 需要重新渲染
			myChart.setOption(option);
		});
	})



}

//表格http://www.chinamoney.com.cn/r/cms/www/chinamoney/data/bond/cbt-pri.json
function cbt() {
	$.ajax({
		url: '../r/cms/www/chinamoney/data/bond/cbt-pri.json',
		type: 'get',
		cache: false
	}).done(function(json) {
		// console.log(json)
		let parse = JSON.parse(json);
		var table1Str ="";
		var table2Str ="";
		for (let i = 0;i<parse.records.length;i++){
			if (i<5){
				table1Str += "<tr><td>"+parse.records[i].abdAssetEncdShrtDesc+"</td><td>"+parse.records[i].dmiLatestRate+"</td><td>"+parse.records[i].dmiLatestContraRate+"</td></tr>";
			}else {
				table2Str += "<tr><td>"+parse.records[i].abdAssetEncdShrtDesc+"</td><td>"+parse.records[i].dmiLatestRate+"</td><td>"+parse.records[i].dmiLatestContraRate+"</td></tr>";
			}
		}

		$("#table1>tbody").html(table1Str);
		$("#table2>tbody").html(table2Str);
		$("#tab-time").html("数据时间："+parse.data.showDateCN);
	})
}
function refALL() {
	iblr();
	iblr_chrt();
	prr();
	prr_char();
	cbt();
}
(function () {
	refALL();
	setInterval(function () {
		refALL();
	}, 1000*60*5 );
})();

